<template>
  <div class="item-box">
    <div class="item-title-box">
      <div class="title">{{itemTitle}}</div>
      <div>
        <span class="num" :style="{color: color[0]}">{{itemNum}}</span>
        <span class="cam">{{unit}}</span>
      </div>
    </div>
    <div class="item-chart-box">
      <div class="chart-title">{{chartTitle()}}</div>
      <div class="chart-con" :style="{height: height}">
        <LineChart
          :chartData="chartData"
          :text="text"
          :area="true"
          :unit="unit"
          :color="color"
        />
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from '@/components/chart/line/LineChart.vue';
export default {
  data() {
    return {
    };
  },

  props: {
    // 标题
    itemTitle: {
      typeof: String,
      default: '今日抽采量'
    },
    // 数据
    itemNum: {
      typeof: String,
      default: ''
    },
    // 图表数据
    chartDatas: {
      typeof: Array,
      default: () => []
    },
    // color 图表颜色
    color: {
      typeof: Array,
      default: () => []
    },
    // 图表文本
    text: {
      typeof: Array,
      default: () => ['数据']
    },
    // 图表单位
    unit: {
      typeof: String,
      default: ''
    },
    // 图表高度
    height: {
      typeof: String,
      default: ''
    }
  },

  components: {
    LineChart
  },

  computed: {
    chartTitle() {
      return function() {
        let name = '';
        switch (this.itemTitle) {
          case '今日抽采量':
            name = '近24小时抽采量统计';
            break;
          case '近七天抽采量':
            name = '近七天抽采量统计';
            break;
          case '近30天抽采量':
            name = '近30天抽采量统计';
            break;
        }
        return name;
      };
    },
    chartData() {
      return this.chartDatas.map(item => {
        return {
          x: item.time,
          y: item.value * 1,
          s: '数据'
        };
      });
    }
  },

  methods: {}
};

</script>
<style scoped lang="scss">
.item-box{
  margin-bottom: .9375rem;
  .item-title-box{
    height: 2.1875rem;
    padding: 0 .625rem;
    background-color: #2A394E;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .625rem;
    border-radius: 4px;
    .title{
      color: #F8F8F8;
      font-size: .875rem;
    }
    .num{
      font-size: 16px;
      margin-right:.3125rem ;
    }
    .cam{
      color: #8D8D8D;
      font-size: .75rem;
    }
  }
  .item-chart-box{
    .chart-title{
      color: #8D8D8D;
      font-size: .75rem;
      margin-bottom: .625rem;
    }
  }
}
</style>
